import React from 'react';
import { Card,Select,Button, Balloon, Icon } from '@alifd/next';
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
import {one as mock} from '../../mock';

import styles from './index.module.scss';

interface ChartItem {
  date?: string | number;
  value?: number;
  type?: string;
}

interface FusionCardAreaChartProps {
  title?: string | React.ReactDOM;
  subTitle?: string | React.ReactDOM;
  value?: string;
  hint?:string;
  chartData?: ChartItem[];
  des?: string;
  rate?: string;
  chartHeight?: number;
  type?: string;
}

const DEFAULT_DATA: FusionCardAreaChartProps = {
  title: '',
  subTitle: '总阅读量',
  hint:'欢迎查看文章阅读量',                 //提示信息
  value: mock.value,
  type: mock.type,
  chartData: mock.saleList,
  chartHeight: 120,
};

const dataSource = [
  {value: '10001', label: '全年',xAxis:1,yAxis: 10},
  {value: 10002, label: '1月',xAxis:2,yAxis: 10},
  {value: 10003, label: '2月',xAxis:3,yAxis: 10},
  {value: 10004, label: '3月',xAxis:4,yAxis: 10},
  {value: 10005, label: '4月',xAxis:5,yAxis: 10},
  {value: 10006, label: '5月',xAxis:6,yAxis: 10},
  {value: 10007, label: '6月',xAxis:7,yAxis: 10},
  {value: 10008, label: '7月',xAxis:8,yAxis: 10},
  {value: 10009, label: '8月',xAxis:9,yAxis: 10},
  {value: 10010, label: '9月',xAxis:10,yAxis: 10},
  {value: 10011, label: '10月',xAxis:11,yAxis: 10},
  {value: 10012, label: '11月',xAxis:12,yAxis: 10},
  {value: 10013, label: '12月',xAxis:13,yAxis: 10},
];

function handleChange(value) {
  console.log(value);
}

const FusionCardAreaChart: React.FunctionComponent<FusionCardAreaChartProps> = (props = DEFAULT_DATA): JSX.Element => {
  const { title, subTitle,hint, value, chartData, type, chartHeight } = { ...DEFAULT_DATA, ...props };
 //提示信息
 const content = (<div><p>{hint}</p></div>);
 const MoveTarget = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
  return (
    <Card free className={styles.areaChart}>
      {
        title ? (
          <>
            <Card.Header title={title} />
            <Card.Divider />
            <Button style={{margin: '5px'}}>hover</Button>
          </>
        ) : null
      }
      <Card.Content>
        <div className={styles.subTitle}>
          {subTitle}
          <Balloon trigger={MoveTarget} triggerType="hover">
            {content}
        </Balloon>
          </div>
        <div className={styles.value}>{value}</div>
        <div className={styles.des}><Select useDetailValue defaultValue={{value: '10001', label: '全年'}} onChange={handleChange} dataSource={dataSource} style={{width: 100}} /></div>
        <Chart
          width={10}
          height={chartHeight}
          data={chartData}
          scale={{
            date: {
              range: [0, 1],
            },
          }}
          forceFit
          padding={['auto', 'auto']}
        >
          {/* 刻度线 */}
          <Axis name="xAxis" />
          <Axis name="yAxis" />
          {/* 提示信息 */}
          <Tooltip showCrosshairs={true} />              
          <Geom type="line" position="date*阅读量" color="#00D6CB" shape="smooth" opacity={1} />
          <Geom type="area" position="date*阅读量" color="#00D6CB" shape="smooth" opacity={0.1} />

        </Chart>
      </Card.Content>
    </Card>
  );
};

export default FusionCardAreaChart;
